<template>
  <div>
    <a-select
      :mode="multi==true?'multiple':'default'"
      style="width: 100%"
      placeholder="请选择进度模板"
      @deselect="deselect"
      v-model="ids"
      :open="open"
      :disabled="disabled"
      @dropdownVisibleChange="selectIds">
      <a-select-option v-for="item in selectedObj" :key="item.id">{{ item.templateName }}</a-select-option>
    </a-select>
    <select-process-template-input-modal
      ref="inputModal"
      :urlList="urlList"
      :multi="multi"
      @choseObj="choseObj"></select-process-template-input-modal>
  </div>
</template>

<script>
import SelectProcessTemplateInputModal from './modules/SelectProcessTemplateInputModal'
import { getAction } from '@/api/manage'

export default {
  name: 'SelectProcessTemplateInput',
  components: { SelectProcessTemplateInputModal },
  props: {
    disabled: {
      type: Boolean,
      required: false,
      default: false
    },
    open: {
      type: Boolean,
      required: false,
      default: false
    },
    value: {
      type: String,
      required: false,
      default: ''
    },
    multi: {
      type: Boolean,
      default: false,
      required: false
    },
    urlList: {
      type: String,
      default: '/api/erp/progress/erpProgressTemplate/list',
      required: false
    },
    // 业务分类
    categoryName: {
      type: String,
      default: '',
      required: false
    },
    props: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      ids: [],
      selectedObj: [],
      deleteIds: [],
      list: [],
      objs: '',
      url: {
        queryById: '/api/erp/progress/erpProgressTemplate/queryById',
        queryByMainId: '/api/erp/progress/erpProgressTemplateDt/queryByMainId'
      }
    }
  },
  mounted() {
    // this.initObj(this.value);
  },
  watch: {
    value(val) {
      this.initObj(val);
    },
    categoryName: {
      handler(val) {
        if (val) {
          getAction('/api/erp/files/category/filesBusinessCategory/list', { categoryCode: val }).then((res) => {
            if (res.success) {
              console.log('43as', res)
              this.$refs.inputModal.queryParam.bussinessName = res.result.records[0].parentCode;
              this.$refs.inputModal.queryParam.bussinessType = res.result.records[0].parentId;
              this.$refs.inputModal.loadData()
            }
          });
        }
      },
      immediate: true
    }
  },
  model: {
    prop: 'value',
    event: 'change'
  },
  methods: {
    initObj(ids) {
      this.deleteIds = [];
      this.selectedObj = [];
      if (ids && ids.length > 0) {
        this.ids = ids.split(',');
        let url = this.url.queryById;
        let param = { id: ids };
        getAction(url, param).then((res) => {
          if (res.success) {
            if (!Array.isArray(res.result)) {
              this.selectedObj.push(res.result);
            } else {
              for (let i = 0; i < res.result.length; i++) {
                this.selectedObj.push(res.result[i]);
              }
            }
            this.$refs.inputModal.edit(res.result, this.ids);
          }
        });
      } else {
        this.ids = [];
        this.$refs.inputModal.edit(null, null);
      }
    },
    resetObj() {
      this.userType = false;
      this.ids = [];
      this.selectedObj = [];
      this.deleteIds = [];
      this.open = false;
      this.$refs.inputModal.edit(null, null);
    },
    selectIds() {
      if (!this.disabled) {
        this.deleteId();
        this.$refs.inputModal.add(this.selectedObj, this.ids);
      }
    },
    deselect(value, option) {
      this.deleteIds.push(value);
      this.deleteId();
      this.choseObj(this.selectedObj);
    },
    deleteId() {
      let that = this;
      this.selectedObj = this.selectedObj.filter(function (e) {
        return that.deleteIds.indexOf(e.id) == -1;
      })
      this.deleteIds = [];
    },
    // 子modal回调
    choseObj: function (list) {
      if (list.choseObj.length > 0) {
        let data = list.choseObj[0]
        this.selectedObj = list.choseObj
        this.ids = []
        this.ids.push(data.id)
        // 查看模板中所有进度
        let url = this.url.queryByMainId;
        let param = { mainId: data.id };
        getAction(url, param).then((res) => {
          if (res.success) {
            this.$emit('input', res.result, data)
          } else {
            this.$message.warning(res.message)
          }
        });
        if (!this.multi) {
          // 查出当前行的模板名称
          const record = this.selectedObj.find(item => item.id === data.id) || {}
          this.$emit('update:templateName', record.templateName)
        }
        this.objs = this.ids.join(',')
        this.$emit('change', this.objs)
        this.$emit('back', this.selectedObj)
      }
    }
  }
}
</script>

<style scoped>

</style>
